<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				background: red;				
			}

			.box2 {
				background: green;
				clear: both;
				margin-top: 20px;
			}

			.box1 p {
				width: 100px;
				background: yellow;

			}

			.box2 p {
				width: 100px;
				background: blue;
			}

			p {
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 
		1.清除浮动方式二
		 给后面的盒子设置clear属性
		 取值
		 left   告诉浏览器不要去找前面的左浮动元素		 
		 right  告诉浏览器不要去找前面的右浮动元素		 
		 both    不要去找前面的左浮动和有浮动元素		 
		 none    默认取值，按照浮动元素的排序规则来排序
		 
		 注意：使用这种清除浮动方式会使margin属性会失效
		 
		 	 
		 -->
		<div class="box1">
			<p>我是段落1</p>
			<p>我是段落1</p>
			<p>我是段落1</p>
		</div>
		<div class="box2">
			<p>我是段落2</p>
			<p>我是段落2</p>
			<p>我是段落2</p>
		</div>
	</body>
</html>
